<template>
    <div class="wrap">
        <head-title :title="headText" @callback="onClickLeft"></head-title>
        <div class="i-home wrapbd">
            <div class="shoplist shopall">
                <ul>
                    <li v-for="(item,index) in listAll" :key="index">
                        <div class="checkbox_ic" v-if="item.is_show == 1">
                            <a href="javascript:void 0" class="item-check-btn" :class="{'check':item.checked}" @click="selectedProuct(item)"></a>
                        </div>
                        <span v-if="item.is_show == 1"><router-link :to="{path:'mallDetails',query:{p_id:item.id}}"><img :src="item.cover_img"></router-link></span>
                        <span v-if="item.is_show == 0"><img :src="item.cover_img"></span>
                        <div class="prter">
                            <p>{{item.product_name_full}}</p>
                            <p>库存：{{item.spec_stock}}</p>
                            <label><i class="left">￥{{item.unit_money}}</i>
                        </label>
                        </div>
                        <div class="tips">
                            <label class="left"><i class="fa fa-minus" aria-hidden="true" @click="reduceshop(item)"></i></label>
                            <span>{{item.buy_num}}</span>
                            <label class="right"><i class="fa fa-plus" aria-hidden="true" @click="addshop(item)"></i></label>
                        </div>
                        <i class="fa fa-trash fa-lg delete" @click="deleteprout(item.spec_id)" aria-hidden="true"></i>
                        <b class="xj" v-if="item.is_show == 0"><img src="./../../assets/img/xj.png"></b>
                    </li>
                </ul>
            </div>
            <p class="tsd" v-if="listAll.length == 0">购物车空空如也</p>
        </div>
        <div class="addOrd" v-if="listAll.length != 0">
			<div class="allOrder">
                <div class="checkbox_ic">
                    <span class="item-check-btn" :class="{check:checkAllFlag}" @click="checkAll"></span>
                    <i>全选</i>
                </div>
				<p class="left">合计：<label>￥{{totalPrice |　nubFixed}}</label></p>
				<div class="sumbOrder right" @click="commitOrder">去结算</div>
			</div>
        </div>
        <tabbar :num ="num"></tabbar>
    </div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";
    import tabbar from "./../../components/tabbar.vue";
    import { Dialog,SubmitBar,Checkbox } from 'vant';
    export default {
        data(){
            return {
                headText: '购物车',  //顶部标题
                totalPrice:0,
                value:'',
                listAll:[], //数据列表
                buynum:1,  //商品购买数量
                num:2,
                checked:'',
                checkAllFlag:false,  //全选状态
                tt:false,
            }
        },
		mounted(){
            this.initialize();  //获取商品详情
        },
		methods:{
          //修改购物车属性
          checkedProduct(params) {
            var _this = this;
            this.Tools.AXIOS({
              url: 'cart/edit',
              transformRequest: params,
              success: function (res) {
                _this.calctotalPrice(); //重新计算价格
                _this.checkAllFlag = false;
              },error(){}
            })
          },

          //左上角返回键
          onClickLeft () { this.$router.go(-1);},
          //获取购物车列表
          initialize(){
            var _this = this;
            _this.listAll = [];
            this.Tools.AXIOS({
                url: 'cart/list',
                transformRequest:{
                page: this.page || 1,
              },
              success: function (res) {
                  let result = res.data.data
                  _this.listAll.push(...result.list);
                  _this.totalPrice = result.total_money;
              }
            })
          },
          //选择复选框
          selectedProuct(item){
            if(item.stock_num < 1){
                this.$toast({message: '库存不足', position: 'bottom',duration: 1500})
            }else if(item.is_show == 0){
                this.$toast({message: '商品已经下架', position: 'bottom',duration: 1500})
            }else{
                if( typeof item.checked == 'undefined'){
                    this.$set(item,"checked",true);
                }else{
                    var params = {
                      spec_id : item.spec_id,    //商品ID
                      checked : !item.checked==false? 0 :1,   //选中状态
                      selected_num: item.buy_num
                    };
                    this.checkedProduct(params);
                    item.checked = !item.checked;
                }
                this.calctotalPrice();
            }
          },
          //计算总金额
          calctotalPrice(){
            var _this = this;
            _this.totalPrice = 0;
            this.listAll.forEach((item,index)=>{
                if(item.checked){
                    _this.totalPrice += item.buy_num * item.unit_money;
                }
            });
          },
          //全选
          checkAll(){
            var _this = this;
            this.checkAllFlag = !this.checkAllFlag;
            this.listAll.forEach((item,index)=>{
                if( typeof item.checked == 'undefined'){
                    if(item.stock_num != 0 && item.is_show != 0){
                        _this.$set(item,"checked",this.checkAllFlag);
                    }
                }else{
                    item.checked = _this.checkAllFlag;
                }
            });
            this.Tools.AXIOS({
              url: 'cart/checkall',
              transformRequest: {
                checked: this.checkAllFlag? 1: 0
              },
              success: function (res) {
                _this.calctotalPrice(); //重新计算价格
              },error(){}
            })
          },
          //提交订单
          commitOrder(){
            let prouctdArr = [],_this = this;
            this.listAll.forEach((item,index)=>{
              item.checked ? prouctdArr.push({buy_num:item.buy_num,product_id:item.product_id}): '';
            })
            if(prouctdArr.length == 0) {
              this.$toast({message: '至少选择一件商品', position: 'bottom',duration: 1500})
              return;
            }
            this.$router.push({path:'confirmOrder',query:{type:1}});

              //       let prouctdArr = [],_this = this;
              //       this.listAll.forEach((item,index)=>{
              //           item.checked ? prouctdArr.push({buy_num:item.buy_num,product_id:item.product_id}): '';
              //       })
              //       if(prouctdArr.length == 0){
              //           this.$toast({message: '至少选择一件商品', position: 'bottom',duration: 1500})
              //       }else{
              // this.Tools.AXIOS({
              //   url: 'order/add',
              //   transformRequest: {
              //     product_list : JSON.stringify(prouctdArr),    //商品列表
              //     tips: 1,
              //   },
              //   success: function (res) {
              //     window.sessionStorage.setItem('product_id',JSON.stringify(prouctdArr));
              //                   _this.$router.push({path:'confirmOrder',query:{type:1}});
              //   },error(){}
              // })
              //       }
          },
            //删除商品
          deleteprout(spec_id){
            let _this = this;
            Dialog.confirm({
              title: '温馨提示',
              message: '确定删除该商品？'
            }).then(() => {
              this.Tools.AXIOS({
                url: 'cart/del',
                transformRequest: {
                  spec_id : spec_id,    //商品ID
                },
                success: function (res) {
                    _this.$toast.success(res.data.msg);
                    _this.initialize() //重新拉取商品列表信息
                    _this.calctotalPrice();
                    _this.checkAllFlag = false;
              },error(){}
              })
            });
          },
          //添加购买数量
          addshop(item){
                    let _this = this;
                    this.Tools.AXIOS({
                        url: 'cart/edit',
                        transformRequest: {
                          spec_id : item.spec_id,    //商品ID
                          selected_num : item.buy_num + 1,   //购买数量
                        },
                        success: function (res) {
                            item.buy_num++; _this.calctotalPrice();
                        },stock(res){
                            item.buy_num = res.data.data;
                        },error(){}
                    })
                },
          //删减购买数量
          reduceshop(item){
                    let _this = this;
                    if(item.buy_num == 1){
                        this.$toast({message: '至少购买1件', position: 'bottom',duration: 1500})
                    }else{
                        this.Tools.AXIOS({
                            url: 'cart/edit',
                            transformRequest: {
                              spec_id : item.spec_id,    //商品ID
                              selected_num : item.buy_num - 1,   //购买数量
                            },
                            success: function (res) {
                                item.buy_num--;_this.calctotalPrice();
                            },stock(res){
                                item.buy_num = res.data.data;
                            },error(res){
                            }
                        })
                    }
                },
        },
		components: {
            HeadTitle,
            Dialog,
            SubmitBar,
            Checkbox,
            tabbar,
		},
    }
</script>
<style scoped>
    ::-webkit-scrollbar { display: none;}
    .wrap{ background: #fff;}
    .i-home .shoplist{ width: 100%; margin: 0 auto; border-bottom: 1px solid #F4F4F4;}
    .i-home .shoplist:last-child{ margin-bottom: 1.5rem; padding-bottom: .3rem;  border-bottom:none;}
    .i-home .shoplist .heade{ width: 95%; line-height: .2rem; padding: 1rem 0 0; margin: 0 auto; overflow: hidden;}
    .i-home .shoplist .heade span:nth-child(1){ font-size: 1.4rem; color: #000; }
    .i-home .shoplist .heade span:nth-child(2){ width: 2.5rem;}
    .i-home .shoplist .heade span img{ width: 100%; }
    .i-home .shoplist ul{ overflow: hidden; }
    .i-home .shoplist ul li{ width: 100%; display: flex; background: #fff; position: relative; padding: .3rem 0; border-bottom: 1px solid #F3F3F3; box-sizing: border-box;}
    .i-home .shoplist ul li span{ width: 30%; height: 2.5rem; overflow: hidden; display: block; margin-left: .8rem;}
    .i-home .shoplist ul li span img{ width: 100%;}
    .i-home .shoplist ul li .prter{ width: 55%;}
    .i-home .shoplist ul li .prter p{ width: 50%; padding: 0 .2rem; font-size: .35rem; display: block; color: #323232; border: 0; text-align: left;}
    .i-home .shoplist ul li .prter p:nth-of-type(1){ margin-bottom: .3rem; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .i-home .shoplist ul li .prter label{ font-size: .35rem; color: #FD9709; font-style: normal; margin-top: .4rem; display: block;}
    .i-home .shoplist ul li .prter label i{ font-style: normal; padding: 0 .2rem;}
    .i-home .shoplist p{ color: #ccc; padding: .35rem 0; text-align: center; border-top: 1px solid #F3F3F3;}

	.i-home .shoplist .tips{ position: absolute; right: .3rem; bottom: .3rem;  height: .6rem; border: 1px solid #ac956c; border-radius: 3px;}
    .i-home .shoplist .delete{ position: absolute; right: .3rem; top: .4rem; color: #d6d6d6;}
    .i-home .shoplist .tips label{ text-align: center; height: .6rem; line-height: .6rem;}
	.i-home .shoplist .tips label:nth-of-type(1){ border-right: 1px solid #ac956c;}
	.i-home .shoplist .tips label:nth-of-type(2){ border-left: 1px solid #ac956c;}
	.i-home .shoplist .tips label i{ padding:0 .2rem; color: #ac956c; }
	.i-home .shoplist .tips input{ margin: 0 .4rem; background:none; font-size: .36rem; line-height: .6rem;}
    .i-home .shoplist .tips span{ margin: 0 .4rem; background:none; font-size: .36rem; display:initial; line-height: .6rem;}
    .van-checkbox{ margin-left: .2rem;}
    .checkbox_ic{ position: absolute; left: .1rem; top:1.3rem; display: flex;}
    .checkbox_ic i{ color: #ABABAB; font-size: .32rem; font-style: normal; margin: 0.05rem .1rem 0; display: block;}
    .fa-check-circle{ color: #06BF04!important;}
    .item-check-btn { display: inline-block; width: .5rem; height: .5rem; border: 1px solid #ccc; border-radius: 50%; text-align: center;  vertical-align: middle;}
    .check { border-color: #06BF04; color: #fff; background:#06BF04 url(./../../assets/img/gl.png) .1rem center no-repeat;}
	.allOrder{ width: 100%; position: fixed;  bottom: 50px; left: 0; border-top: 1px solid #E5E5E5; background-color: #fff;}
	.allOrder p{ font-size: .35rem; color: #666; margin: .44rem 2rem 0;}
    .allOrder p label{ font-size: .35rem; color: #ea8800; }
    .allOrder .checkbox_ic{ position: absolute; left: .2rem; top:.4rem;}
    .sumbOrder{ width: 30%; text-align: center; color: #fff; font-size: .35rem; background-color: #ea8800; padding: .4rem 0;}
    .tsd{ font-size: .35rem; color: #666; text-align: center; padding: .5rem 0;}
    .xj{ width: 50%; position: absolute ; right: 6%; top: 10%;}
    .xj img{ width: 100%;}
</style>
